import { useCallback, useMemo, useState } from "react";
import UseMemoCom from "./UseMemoCom";
import CallbackCom from "./CallbackCom";
function UseMemoDemo(){

    const [count, setCount] = useState(0);
    const [title, setTitle] = useState("你好");

    // const fn=()=>{
    //     console.log("111");
        
    // }

    const fn=useCallback(()=>{
        console.log("111");
    },[])

    return(
        <>
         <div>UseMemoDemo

            <div>
                {count}
                <div>
                    {title}
                </div>
                <button onClick={() => setCount(count + 1)}>++</button>
                <button onClick={() => setTitle("hello world")}>修改</button>
            </div>

            {/* <UseMemoCom /> */}

            {

                useMemo(() => <UseMemoCom />, [title])
            }
         </div>
         <CallbackCom fn={fn}></CallbackCom>
        </>
    )

}
export default UseMemoDemo;